<template>
  <div>
    <header onclick="history.go(-1)">
      <img :src="require('../assets/go.png')" alt="" />
    </header>
    <div id="banner">
      <img :src="path + item.img" alt="" />
      <van-notice-bar
        class="tag_box"
        left-icon="volume-o"
        text="将带着新鲜气息的产品送到你的手中，是我们最大的心愿"
      />
      <div class="price_box">
        ￥{{ item.price }}
        <span class="olprice">￥{{ item.origin_price }}</span>
      </div>
    </div>
    <article id="content">
      <h3 class="title">{{ item.title }}</h3>
      
      <van-rate
        v-model="value"
        :size="15"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
      <van-action-sheet  title="标题">
        <div class="content">内容</div>
      </van-action-sheet>
      <p id="tips">
        <van-button plain hairline type="info" size="mini">分类：{{ item.type_name }}</van-button>
        <van-button plain hairline type="info" size="mini">库存：{{ item.num }}</van-button>
      </p>
      <div class="cbox">
        <p>{{ item.content }}</p>
      </div>
    </article>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" to="/shop" />
      <van-goods-action-button
        type="warning"
        @click="buy()"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <div style="width: 100%; height: 50px"></div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import { newsDetail } from "../api";
import { Toast } from "vant";
import { newsBuy } from "../api";

export default {
  name: "newsdetail",
  data() {
    return {
      item: {},
      value: 3,

    };
  },
  computed: {
    // ...mapState(['badge'])
    ...mapState({
      path: (state) => state.path,
    }),
  },
  methods: {
    buy() {
      Toast("添加成功");
      newsBuy({ id: this.$route.params.id })
        .then((res) => {
          console.log(res);
          this.item = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    newsDetail({ id: this.$route.params.id })
      .then((res) => {
        console.log(res);
        this.item = res.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style scoped>
header {
  position: fixed;
  top: 5px;
  left: 5px;
  background-color: rgba(93, 92, 92, 0.433);
  padding: 5px;
  border-radius: 50%;
}
header img {
  width: 25px;
  height: 25px;
}
#banner {
}
#banner img {
  /* width: 100%; */
}
.tag_box {
  position: relative;
  top: -30px;
}
.price_box {
  position: relative;
  padding: 0 20px;
  top: -30px;
  height: 60px;
  background: linear-gradient(to right, #ff2c2c, #f0f336);
  font-weight: bolder;
  font-size: 26px;
  line-height: 60px;
  color: white;
}
.btn_box {
  
}
.olprice {
  text-decoration: line-through;
  color: rgb(226, 201, 201);
  font-size: 18px;
}
.title {
  /* position: relative;
  top: -30px; */
}
#tips {
  font-size: 15px;
}
.type {
  color: darkgray;
}
#content {
  position: relative;
  top: -20px;
  margin: 2%;
  background-color: rgb(255, 255, 255);
}
.cbox {
  position: relative;
  width: 90%;
  margin-top: 5%;

}
.van-goods-action-button--warning {
  background: linear-gradient(to right, #fc8021, #ffae17);
}
.van-goods-action-button--danger {
  background: linear-gradient(to right, #ff1b1b, #ff0909);
}
</style>